import React, { useEffect, useState } from 'react'
import FilterBar from './filterBar/FilterBar.jsx'
import Scroll from '../../../baseUI/scroll/index.jsx';
import "./SingerRank.css"

import * as api from '../../../api'
import { useHistory } from 'react-router-dom';
import LazyLoad from 'react-lazyload';
import loading from '../../../assets/images/loading.gif'
import { forceCheck } from 'react-lazyload'

const categoryTypes = [
    {
      name: "华语男",
      key: "1001"
    },
    {
      name: "华语女",
      key: "1002"
    },
    {
      name: "华语组合",
      key: "1003"
    },
    {
      name: "欧美男",
      key: "2001"
    },
    {
      name: "欧美女",
      key: "2002"
    },
    {
      name: "欧美组合",
      key: "2003"
    },
    {
      name: "日本男",
      key: "6001"
    },
    {
      name: "日本女",
      key: "6002"
    },
    {
      name: "日本组合",
      key: "6003"
    },
    {
      name: "韩国男",
      key: "7001"
    },
    {
      name: "韩国女",
      key: "7002"
    },
    {
      name: "韩国组合",
      key: "7003"
    },
    {
      name: "其他男歌手",
      key: "4001"
    },
    {
      name: "其他女歌手",
      key: "4002"
    },
    {
      name: "其他组合",
      key: "4003"
    }
  ];
const FilterFirst = [
    {
        name:"全部",
        key:"101"
    },
    {
        name:"内地",
        key:"102"
    },
    {
        name:"港台",
        key:"103"
    },
    {
        name:"欧美",
        key:"104"
    },
    {
        name:"日本",
        key:"105"
    },
    {
        name:"韩国",
        key:"106"
    }

]
const FilterSecond = [
    {
        name:"全部",
        key:"201"
    },
    {
        name:"男",
        key:"202"
    },
    {
        name:"女",
        key:"203"
    },
    {
        name:"组合",
        key:"204"
    }
]
const NameIndex =[
    {
        key: "A",
        name: "A"
      },
      {
        key: "B",
        name: "B"
      },
      {
        key: "C",
        name: "C"
      },
      {
        key: "D",
        name: "D"
      },
      {
        key: "E",
        name: "E"
      },
      {
        key: "F",
        name: "F"
      },
      {
        key: "G",
        name: "G"
      },
      {
        key: "H",
        name: "H"
      },
      {
        key: "I",
        name: "I"
      },
      {
        key: "J",
        name: "J"
      },
      {
        key: "K",
        name: "K"
      },
      {
        key: "L",
        name: "L"
      },
      {
        key: "M",
        name: "M"
      },
      {
        key: "N",
        name: "N"
      },
      {
        key: "O",
        name: "O"
      },
      {
        key: "P",
        name: "P"
      },
      {
        key: "Q",
        name: "Q"
      },
      {
        key: "R",
        name: "R"
      },
      {
        key: "S",
        name: "S"
      },
      {
        key: "T",
        name: "T"
      },
      {
        key: "U",
        name: "U"
      },
      {
        key: "V",
        name: "V"
      },
      {
        key: "W",
        name: "W"
      },
      {
        key: "X",
        name: "X"
      },
      {
        key: "Y",
        name: "Y"
      },
      {
        key: "Z",
        name: "Z"
      }

]
  

const SingerRank = (props) => {
    // console.log(props);
    const {
        singerMessage=[],
        select,
        select2,
        setSelect,
        setSelect2,
        changeSingerMessage=[]
    } = props
    // console.log(props,'rankkkkkkkkkk');
    const history = useHistory()
    const gotoDetail = (id) => {
      // console.log(history,'history')
      history.push(`/singer/${id}`)
  }
    // let [page, setPage] = useState(1)
    // const fetchList = (page) => {
    //     api
    //         .reqGetHotSingerListRequest(page)
    //         .then(res => {
    //             setList([
    //                 ...list,
    //                 ...res.data.data.list
    //             ])
    //         })
    // }
    // useEffect(() => {
        
    //     fetchList(0)
    // }, [])
    // useEffect(() => {
    //     fetchList(page)
    // }, [page])
    return (
        <div>
        <FilterBar FilterFirst={FilterFirst} FilterSecond={FilterSecond} NameIndex={NameIndex}
         select={select} select2={select2} setSelect={setSelect} setSelect2={setSelect2}
         />
        <div className="scroll_x">
        <Scroll
                direction={"vertical"}
                refresh={false}
                onScroll={
                    (e) => {
                        // console.log(e.y)
                        if (e.y < -1142) {
                            
                        } else {
                            
                        }
                        forceCheck()
                    }
                }
                // pullUp={}
                // pullDown={setPage(page+50)}
                >
            <div className="rank">
                {changeSingerMessage.map((item,index)=>{
                    return(
                    <div className='singer_box_rank' key={index} onClick={()=> gotoDetail(item.id)}>
                        <div className="avatar">
                        <LazyLoad height={100} placeholder={
                            <img width="100%" height="100%" src={loading}   
                            />
                        }>
                            <img src={item.picUrl?item.picUrl:loading} alt="" className='avatar_singer' />
                        </LazyLoad>
                        </div>
                        <div className="name">
                        {item.name}
                        </div>
                    </div>
                    )
                        })
}
            
            </div>
            

        </Scroll>

        </div>
        </div>
    )
}

export default SingerRank